<%@ page import="com.ciquan.server.util.web.BasePathUtil" %>
<%--
  Created by IntelliJ IDEA.
  User: kakalee
  Date: 15/1/24
  Time: 14:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<jsp:include page="header.jsp"></jsp:include>
<style>
    .col-xs-6 {
        height: 500px;
    }
</style>

<script>
    $(document).ready(function() {
        Highcharts.setOptions( { global : { useUTC : false } });
        $('#container1').highcharts({
            chart: {
                type: 'spline'
            },
            title: {
                text: '访客数'
            },
            subtitle: {
                text: '每天访客数'
            },
            xAxis: {
                type: 'datetime',
                dateTimeLabelFormats: {
                    millisecond: '%Y-%m',
                    second: '%Y-%m',
                    minute: '%Y-%m',
                    hour: '%Y-%m',
                    day: '%Y-%m',
                    week: '%Y-%m',
                    month: '%Y-%m',
                    year: '%Y-%m'
                }
            },
            yAxis: {
                title: {
                    text: '数量'
                },
                min: 0,
                minTickInterval: 1
            },
            tooltip: {
                formatter: function() {
                    return '<b>'+ this.series.name +'</b><br>'+
                            Highcharts.dateFormat('%Y-%m', this.x) +': '+ this.y +' 人';
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
            },
            series: [{
                name: 'PC端',
                data: [<c:forEach items="${businessStatuses1}" var="businessStatus" varStatus="status">
                    [${businessStatus.date.time},${businessStatus.userCount}]
                    <c:if test="${status.index < fn:length(businessStatuses1) - 1}">
                    ,
                    </c:if>
                    </c:forEach>]
                },{
                    name: '移动端',
                    data: [<c:forEach items="${businessStatuses2}" var="businessStatus" varStatus="status">
                        [${businessStatus.date.time},${businessStatus.userCount}]
                        <c:if test="${status.index < fn:length(businessStatuses1) - 1}">
                        ,
                        </c:if>
                        </c:forEach>]
                },{
                    name: '合计',
                    data: [<c:forEach items="${businessStatuses3}" var="businessStatus" varStatus="status">
                        [${businessStatus.date.time},${businessStatus.userCount}]
                        <c:if test="${status.index < fn:length(businessStatuses3) - 1}">
                        ,
                        </c:if>
                        </c:forEach>]
                }
            ],
            credits: {
                enabled: false
            }
        });


        $('#container2').highcharts({
            chart: {
                type: 'spline'
            },
            title: {
                text: '销售额'
            },
            subtitle: {
                text: '每天销售额'
            },
            xAxis: {
                type: 'datetime',
                dateTimeLabelFormats: {
                    millisecond: '%Y-%m',
                    second: '%Y-%m',
                    minute: '%Y-%m',
                    hour: '%Y-%m',
                    day: '%Y-%m',
                    week: '%Y-%m',
                    month: '%Y-%m',
                    year: '%Y-%m'
                }
            },
            yAxis: {
                title: {
                    text: '销售额'
                },
                labels: {
                    format: '{value:.,0f}'
                },
                min:0
            },
            tooltip: {
                formatter: function() {
                    return '<b>'+ this.series.name +'</b><br>'+
                            Highcharts.dateFormat('%Y-%m', this.x) +': '+ this.y +' 元';
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
            },
            series: [{
                name: 'PC端',
                data: [<c:forEach items="${businessStatuses1}" var="businessStatus" varStatus="status">
                    [${businessStatus.date.time},${businessStatus.orderAmount / 100}]
                    <c:if test="${status.index < fn:length(businessStatuses1) - 1}">
                    ,
                    </c:if>
                    </c:forEach>]
            },{
                name: '移动端',
                data: [<c:forEach items="${businessStatuses2}" var="businessStatus" varStatus="status">
                    [${businessStatus.date.time},${businessStatus.orderAmount / 100}]
                    <c:if test="${status.index < fn:length(businessStatuses1) - 1}">
                    ,
                    </c:if>
                    </c:forEach>]
            },{
                name: '合计',
                data: [<c:forEach items="${businessStatuses3}" var="businessStatus" varStatus="status">
                    [${businessStatus.date.time},${businessStatus.orderAmount / 100}]
                    <c:if test="${status.index < fn:length(businessStatuses3) - 1}">
                    ,
                    </c:if>
                    </c:forEach>]
            }
            ],
            credits: {
                enabled: false
            }
        });

        $('#container3').highcharts({
            chart: {
                type: 'spline'
            },
            title: {
                text: '客户数'
            },
            subtitle: {
                text: '每天客户数'
            },
            xAxis: {
                type: 'datetime',
                dateTimeLabelFormats: {
                    millisecond: '%Y-%m',
                    second: '%Y-%m',
                    minute: '%Y-%m',
                    hour: '%Y-%m',
                    day: '%Y-%m',
                    week: '%Y-%m',
                    month: '%Y-%m',
                    year: '%Y-%m'
                }
            },
            yAxis: {
                title: {
                    text: '客户数'
                },
                min:0
            },
            tooltip: {
                formatter: function() {
                    return '<b>'+ this.series.name +'</b><br>'+
                            Highcharts.dateFormat('%Y-%m', this.x) +': '+ this.y +' 人';
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
            },
            series: [{
                name: 'PC端',
                data: [<c:forEach items="${businessStatuses1}" var="businessStatus" varStatus="status">
                    [${businessStatus.date.time},${businessStatus.orderUserCount}]
                    <c:if test="${status.index < fn:length(businessStatuses1) - 1}">
                    ,
                    </c:if>
                    </c:forEach>]
            },{
                name: '移动端',
                data: [<c:forEach items="${businessStatuses2}" var="businessStatus" varStatus="status">
                    [${businessStatus.date.time},${businessStatus.orderUserCount}]
                    <c:if test="${status.index < fn:length(businessStatuses1) - 1}">
                    ,
                    </c:if>
                    </c:forEach>]
            },{
                name: '合计',
                data: [<c:forEach items="${businessStatuses3}" var="businessStatus" varStatus="status">
                    [${businessStatus.date.time},${businessStatus.orderUserCount}]
                    <c:if test="${status.index < fn:length(businessStatuses3) - 1}">
                    ,
                    </c:if>
                    </c:forEach>]
            }
            ],
            credits: {
                enabled: false
            }
        });
        $('#container4').highcharts({
            chart: {
                type: 'spline'
            },
            title: {
                text: '客单价'
            },
            subtitle: {
                text: '每天客单价'
            },
            xAxis: {
                type: 'datetime',
                dateTimeLabelFormats: {
                    millisecond: '%Y-%m',
                    second: '%Y-%m',
                    minute: '%Y-%m',
                    hour: '%Y-%m',
                    day: '%Y-%m',
                    week: '%Y-%m',
                    month: '%Y-%m',
                    year: '%Y-%m'
                }
            },
            yAxis: {
                title: {
                    text: '客单价'
                },
                labels: {
                    format: '{value:.,0f}'
                },
                min:0
            },
            tooltip: {
                formatter: function() {
                    return '<b>'+ this.series.name +'</b><br>'+
                            Highcharts.dateFormat('%Y-%m', this.x) +': '+ this.y +' 元';
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
            },
            series: [{
                name: 'PC端',
                data: [<c:forEach items="${businessStatuses1}" var="businessStatus" varStatus="status">
                    [${businessStatus.date.time},${businessStatus.orderAmount / businessStatus.orderUserCount / 100}]
                    <c:if test="${status.index < fn:length(businessStatuses1) - 1}">
                    ,
                    </c:if>
                    </c:forEach>]
            },{
                name: '移动端',
                data: [<c:forEach items="${businessStatuses2}" var="businessStatus" varStatus="status">
                    [${businessStatus.date.time},${businessStatus.orderAmount / businessStatus.orderUserCount / 100}]
                    <c:if test="${status.index < fn:length(businessStatuses1) - 1}">
                    ,
                    </c:if>
                    </c:forEach>]
            },{
                name: '合计',
                data: [<c:forEach items="${businessStatuses3}" var="businessStatus" varStatus="status">
                    [${businessStatus.date.time},${businessStatus.orderAmount / businessStatus.orderUserCount / 100}]
                    <c:if test="${status.index < fn:length(businessStatuses3) - 1}">
                    ,
                    </c:if>
                    </c:forEach>]
            }
            ],
            credits: {
                enabled: false
            }
        });
        $('#container5').highcharts({
            chart: {
                type: 'spline'
            },
            title: {
                text: '转化率'
            },
            subtitle: {
                text: '每天转化率'
            },
            xAxis: {
                type: 'datetime',
                dateTimeLabelFormats: {
                    millisecond: '%Y-%m',
                    second: '%Y-%m',
                    minute: '%Y-%m',
                    hour: '%Y-%m',
                    day: '%Y-%m',
                    week: '%Y-%m',
                    month: '%Y-%m',
                    year: '%Y-%m'
                }
            },
            yAxis: {
                title: {
                    text: '转化率'
                },
                labels: {
                    format: '{value:.,0f}%'
                },
                min:0
            },
            tooltip: {
                formatter: function() {
                    return '<b>'+ this.series.name +'</b><br>'+
                            Highcharts.dateFormat('%Y-%m', this.x) +': '+ this.y +' %';
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
            },
            series: [{
                name: 'PC端',
                data: [<c:forEach items="${businessStatuses1}" var="businessStatus" varStatus="status">
                    [${businessStatus.date.time},${businessStatus.orderUserCount * 100 / businessStatus.userCount}]
                    <c:if test="${status.index < fn:length(businessStatuses1) - 1}">
                    ,
                    </c:if>
                    </c:forEach>]
            },{
                name: '移动端',
                data: [<c:forEach items="${businessStatuses2}" var="businessStatus" varStatus="status">
                    [${businessStatus.date.time},${businessStatus.orderUserCount * 100 / businessStatus.userCount}]
                    <c:if test="${status.index < fn:length(businessStatuses1) - 1}">
                    ,
                    </c:if>
                    </c:forEach>]
            },{
                name: '合计',
                data: [<c:forEach items="${businessStatuses3}" var="businessStatus" varStatus="status">
                    [${businessStatus.date.time},${businessStatus.orderUserCount * 100 / businessStatus.userCount}]
                    <c:if test="${status.index < fn:length(businessStatuses3) - 1}">
                    ,
                    </c:if>
                    </c:forEach>]
            }
            ],
            credits: {
                enabled: false
            }
        });
        $('#container6').highcharts({
            chart: {
                type: 'spline'
            },
            title: {
                text: '移动端占比'
            },
            subtitle: {
                text: '每天移动端占比'
            },
            xAxis: {
                type: 'datetime',
                dateTimeLabelFormats: {
                    millisecond: '%Y-%m',
                    second: '%Y-%m',
                    minute: '%Y-%m',
                    hour: '%Y-%m',
                    day: '%Y-%m',
                    week: '%Y-%m',
                    month: '%Y-%m',
                    year: '%Y-%m'
                }
            },
            yAxis: {
                title: {
                    text: '移动端占比'
                },
                labels: {
                    format: '{value:.,0f}%'
                },
                min:0
            },
            tooltip: {
                formatter: function() {
                    return '<b>'+ this.series.name +'</b><br>'+
                            Highcharts.dateFormat('%Y-%m', this.x) +': '+ this.y +' %';
                }
            },
            series: [{
                data: [<c:forEach items="${businessStatuses3}" var="businessStatus" varStatus="status">
                    [${businessStatus.date.time},${businessStatus.percent}]
                    <c:if test="${status.index < fn:length(businessStatuses3) - 1}">
                    ,
                    </c:if>
                    </c:forEach>]
            }
            ],
            credits: {
                enabled: false
            }
        });
    });
</script>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
    <div class="col-xs-6" id="container1"></div>
    <div class="col-xs-6" id="container2"></div>
    <div class="col-xs-6" id="container3"></div>
    <div class="col-xs-6" id="container4"></div>
    <div class="col-xs-6" id="container5"></div>
    <div class="col-xs-6" id="container6"></div>
</div>



</div>
</body>
</html>
